<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
    <% include ../partial/meta %>
    <link rel="stylesheet" href="/app/static/css/frozen.css">
    <link rel="stylesheet" href="/app/static/css/client.css">
    <link rel="stylesheet" href="/app/static/css/jq.css">
    <script type="text/javascript" src ="/app/static/js/zepto.min.js"></script>
    <script type="text/javascript" src ="/app/static/js/carousel.js"></script>
</head>
<body style ="background: #473E3C">
    <div class ="ui-room">
        <div class="carousel">
        <%
            if (house.house.images && house.house.images.length > 0) {
        %>
            <%
                var data = house.house.images.filter(function(image) {
                    return image.classify == house.house.rooms[0].name
                })
                for(var i = 0; i < data.length; i++) {
            %>
                <img data-title ="" src="<%= data[i].path %>?w=640&q=60" alt="">
            <%
                }
            %>
        <%
            }
        %>
        </div>
        <div class ="ui-room-list">
            <ul class="ui-row">
                <%
                    var room = house.house.rooms
                    for(var i = 0; i < room.length; i++) {
                    var Img = house.house.images.filter(function(image) {
                        return image.classify == room[i].name
                    })
                %>
                    <%
                        if (i == 0) {
                    %>
                    <li class="ui-col ui-col-25 current-room" name ="room" >
                        <span style ="background:url(<%= Img[0].path %>); background-size:100% 100%"> <%= room[i].name %> </span>
                    </li>
                    <%
                        } else {
                    %>
                    <li class="ui-col ui-col-25" name ="room" >
                        <span style ="background:url(<%= Img[0].path %>); background-size:100% 100%"> <%= room[i].name %> </span>
                    </li>
                    <%
                        }
                    %>
                <%
                    }
                %>
            </ul>
        </div>
        <div class ="ui-room-more">
            <p>
                <span class ="cur">1</span>/<span class ="all"><%= data.length %></span>
            </p>
            <a href="/app/client/panoramic/<%= house.house.houseId %>">全景看房</a>
        </div>
        <div class ="room-bg bottom-line">
            <ul class="ui-justify ui-whitespace">
                <li><p class="big"><strong><%= house.house.community %></strong></p></li>
                <li><p class ="check"><a href="/app/client/panoramic/<%= house.house.houseId %>"><img src="/app/static/img/area.png" alt=""></a></p></li>
            </ul>
            <ul class="ui-justify ui-whitespace">
                <li>
                    <%
                        var rent = house.house.rooms.length ? parseInt(house.house.rent/house.house.rooms.length) : house.house.rooms.length
                    %>
                    <p class ="brand-color">¥<%= rent %> 元<small>起</small>
                    </p>
                    <%
                        
                    %>
                </li> 
            </ul>
            <ul class="ui-justify ui-whitespace padding">
                <li><p><%= house.house.region %> | <%= house.house.roomNum %>室<%= house.house.hallNum %>厅<%= house.house.toiletNum %>卫|<%= house.house.area %>㎡</p></li>
                <li>
                <% 
                    if(house.house.seemode) {
                %>
                <p class ="check reset"><img src="/app/static/img/business.png" alt=""><%= house.house.seemode %></p>
                <%
                    } else {
                %>
                <p class ="check reset"><img src="/app/static/img/business.png" alt="">不提供带看</p>
                <%
                    } 
                %>
                <% 
                    if(house.house.check) {
                %>
                <p class ="check reset"><img src="/app/static/img/check.png" alt="">房妈妈验房保证</p>
                <%
                    } else {
                %>
                <p class ="check reset"><img src="/app/static/img/check.png" alt="">房妈妈未验房</p>
                <%
                    } 
                %>
                <!-- <p class ="check left"><img src="/app/static/img/business.png" alt="">房东带看</p>
                <p class="check left"><img src="/app/static/img/check.png" alt="">房妈妈验房保证</p> -->
                </li>
            </ul>
        </div>
        <div class ="room-bg room-about">
            <p><%= house.house.comment %></p>
            <div class="more"><span name ="more">更多</span></div>
        </div>
        <div class="room-bg room-detail">
            <p>房源信息</p>
            <div class ="">
                <ul class="ui-row room-detail-item">
                    <li class="ui-col ui-col-100">房源编号：<%= house.house.sourceNo %></li>
                    <li class="ui-col ui-col-50">朝向：<%= house.house.orientation %></li>
                    <li class="ui-col ui-col-50">年代：<%= house.house.decade %></li>
                    <li class="ui-col ui-col-50">楼层：<%= house.house.floorSection %> / <%= house.house.floorTotal %></li>
                    <li class="ui-col ui-col-50">装修：<%= house.house.style %></li>
                    <li class="ui-col ui-col-50">卫生间：<%= house.house.toiletNum %></li>
                    <li class="ui-col ui-col-50">付款方式：<%= house.house.paymode %></li>
                </ul>
            </div>
        </div>
        <div class="room-bg room-detail">
            <p>配套信息</p>
            <div class ="facility-list">
                <ul class="ui-row center">
                    <%
                        for(var i = 0; i < house.house.facilities.length; i++) {
                    %>
                        <li class="ui-col ui-col-20">
                        <%
                            if(house.house.facilities[i].count <= 0) {
                        %>
                            <img src="/app/static/img/non.png" style ="width: 20px">
                        <%
                            } else {
                        %>
                            <img src="/app/static/img/selected.png" style ="width: 20px">
                        <%
                            }
                        %> 
                            <p class ="ui-facility small"><%=house.house.facilities[i].name %></p>
                        </li>
                    <%
                        }
                    %> 
                </ul>
            </div>
        </div>
        <div class="room-bg room-detail">
            <p>室长报价 <small>自由选房，自由报价</small></p>
            <div class ="ui-rooms reset">
                <div class="ui-row-flex ui-whitespace">
                <%
                    var room = house.house.rooms
                    for(var i = 0; i < room.length && room.length >0; i++) {
                %>
                    <div class="ui-col ui-col center"><%=room[i].name %></div>
                <%
                    }
                %>    
                </div>
                <%
                    var group = group.teams
                    for(var i = 0; i < group.length && i < 2; i++) {
                %>
                <br>
                <div class="ui-row-flex ui-whitespace center">
                    
                    <%
                        for(var j = 0; j < group[i].seats.length ; j++) {
                        var seats = group[i].seats[j]
                    %>
                        <%
                            if (seats.userId && seats.leader) {
                        %>
                        <div class="ui-col ui-col position"><img src="<%= seats.userAvatar %>" alt="">
                        <div class="ui-nowrap ui-whitespace small"><%= seats.userName %></div>
                        <%
                            if (seats.userGender == 'm') {
                        %>
                        <i class="ui-icon-male icon"></i>
                        <%
                            } else {
                        %>
                        <i class="ui-icon-female icon"></i>
                        <%
                            } 
                        %>
                        </div>
                        <%
                            } else if(seats.userId && !seats.leader){
                        %>
                        <div class="ui-col ui-col position"><img src="<%= seats.userAvatar %>" alt="">
                        <div class="ui-nowrap ui-whitespace small"><%= seats.userName %></div>
                        <%
                            if (seats.userGender == 'm') {
                        %>
                        <i class="ui-icon-male icon"></i>
                        <%
                            } else {
                        %>
                        <i class="ui-icon-female icon"></i>
                        <%
                            } 
                        %>
                        </div>
                        <%
                            } else {
                        %>
                        <div class="ui-col ui-col middle"><div class="ui-nowrap ui-whitespace">¥<%= seats.rent %> 元/月</div></div>
                        <%
                            } 
                        %>
                    <%
                        }
                    %>
                </div>
                <div class="ui-row-flex ui-whitespace center margin bottom-line">
                    <span class ="index"><%= i+1 %></span>
                    <%
                        for (var k = 0; k < group[i].seats.length; k++) {
                    %>
                        <%
                            if (group[i].seats[k].userId && group[i].seats[k].leader) {
                        %>
                        <div class="ui-col ui-col"><span class ="chief">室长</span></div>
                        <%
                            } else if(group[i].seats[k].userId && !group[i].seats[k].leader){
                        %>
                        <div class="ui-col ui-col"><span class ="roommate">室友</span></div>
                        <%
                            } else {
                        %>
                        <div class="ui-col ui-col"><span class ="join-in" name ="more">加入</span></div>
                        <%
                            } 
                        %>
                    <%
                        } 
                    %>
                </div>
                <%
                    }
                %>    
            </div>
            <div class="more"><span name ="more">更多</span></div>
        </div>
        <div class="room-bg room-detail detail-map" id ="map">
            <p>小区地图</p>
            <div class ="detail-map__option">
                <a href="javascript:void(0)" class ="on" id ="bus">交通</a>
                <a href="javascript:void(0)">教育</a>
                <a href="javascript:void(0)">医疗</a>
                <a href="javascript:void(0)">商业</a>
            </div>
            <div id ="container" style ="width:100%; height: 240px">
                
            </div>
        </div>
        <div class="room-bg room-detail">
            <ul class="ui-row user-list">
                <li class="ui-col ui-col-20"><span><%= favorite.count %></span></li>
                <%
                    for (var k = 0; k < favorite.count && k <= 2; k++) {
                %>
                <li class="ui-col ui-col-20" name ="more"><img src="<%= favorite.users[k].userAvatar %>" alt=""></li>
                <%
                    }
                %>
                <li class="ui-col ui-col-20 last"><img src="/app/static/img/like.png" alt=""><p name ="more">关注</p></li>
            </ul>
        </div>
        <div class ="null"></div>
        <div class ="footer room-footer room-link">
            <ul class="ui-row">
                <li class="ui-col ui-col-50"><a href=" "><img src="/app/static/img/phone.png" alt="">客服</a></li>
                <li class="ui-col ui-col-50"><a href="/app/client/communities/<%= house.house.communityId %>"><img src="/app/static/img/detail.png" alt="">小区</a></li>
            </ul>
        </div>
    </div> 
    <script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=5Q3GyoZeoOi0v4ORvsfBxv8X&v=1.0"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src ="/app/static/js/customalert.js"></script>
    <script>
        (function(){
            var images      = '<%- JSON.stringify(house.house.images) %>';
            var rooms       = '<%- JSON.stringify(house.house.rooms) %>';
            var imgData     = JSON.parse(images);
            var roomData    = JSON.parse(rooms);
            var curIndex    = $('.cur');
            var allIndex    = $('.all');
            var roomIndex   = $("[name='room']");
            var carousel    = $('.carousel');
            var community   = '<%= house.house.community %>';
            var gpsLat      = '<%= house.house.gpsLat %>';
            var gpsLng      = '<%= house.house.gpsLng %>';
                roomIndex.on('click', function() {
                    selectRoom.call($(this))
                })

            function selectRoom() {
                roomIndex.removeClass('current-room')
                this.addClass('current-room')
                var self = this
                var data = imgData.filter(function(image) {
                    return image.classify == roomData[self.index()].name
                })
                setCarousel(data)
            }

            function setIndex(index) {
                curIndex.text(index + 1)
            }

            function　destroyCarousel() {
                carousel.find('*').off()
                carousel.off()
            }

            function setCarousel(data) {
                var html = '';
                for (var i = 0; i < data.length; i++) {
                    html += '<img data-title="" src="' + data[i].path + '"/>';
                }
                allIndex.text(data.length)
                destroyCarousel()
                carousel.html(html).carousel({
                    isShowPager:    false,
                    slideCallback:  function(index) {
                        setIndex(index)
                    }
                })
            }
            // init 
            carousel.carousel({
                isShowPager:    false,
                isAutoPlay :    true,
                slideCallback:  function(index) {
                    setIndex(index)
                }
            })

            var map = new BMap.Map("container"); 
                map.centerAndZoom(new BMap.Point(eval(gpsLng), eval(gpsLat)), 15); 

               // 你要输入经纬度
                var point = new BMap.Point(eval(gpsLng), eval(gpsLat));
                var marker = new BMap.Marker(point);
          
                map.addOverlay(marker);

                $('.detail-map__option a').on('click', handle);

                var options = {
                    renderOptions: {  
                       map: map,
                       autoViewport: false,  
                       selectFirstResult: false  
                    },
                    pageCapacity: 10 
                };
                var local = new BMap.LocalSearch(map, options);
                var markerArr = [];
                local.setMarkersSetCallback(function(pois){
                    for(var i=0;i<pois.length;i++){
                       markerArr[i]=pois[i].marker;
                       pois[i].marker.addEventListener("infowindowopen", function(e){
                      
                       })  
                    }
                })

                function handle(){
                    var that = $(this);
                       that.addClass('on');
                       that.siblings().removeClass('on');
                   
                    var keyword = that.text();
                    if(keyword =='交通'){
                       keyword = "公交站";
                       local.searchNearby('公交',point,1000);
                    }else{

                       local.search(keyword);
                    }
                }

                map.addControl(new BMap.ZoomControl()); 
                $('.detail-map__option a').eq(0).trigger('click');

                function alert(str) {
                    $.customalert({
                        content: str
                    })
                }
                $("[name='more']").on('click', function(event) {
                    alert('<a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.fangmm.housemother">点击下载房妈妈App，加入合租生活</a>')
                });


                wx.config({
                    debug: false,
                    appId: '<%= jsapiSignature.appId %>',
                    timestamp: "<%= jsapiSignature.timestamp %>",
                    nonceStr: '<%= jsapiSignature.noncestr %>',
                    signature: '<%= jsapiSignature.signature %>',
                    jsApiList: [
                        'onMenuShareTimeline',
                        'onMenuShareAppMessage'
                    ]
                });


                wx.ready(function(){

                    wx.onMenuShareTimeline({
                        title: '我发现了一间很棒的房源，快来合租吧~',
                        link: '',
                        imgUrl: '',
                        success: function () {

                        },
                        cancel: function () {
                            alert("您取消了分享链接！");
                        }
                    });

                    wx.onMenuShareAppMessage({
                        title: '我发现了一间很棒的房源，快来合租吧~',
                        link: '',
                        desc: '<%= user.user.name %>给您分享了一套房源哦~快来看看吧~ <%= house.house.region %> <%= house.house.roomNum %>室 <%= house.house.hallNum %> 厅 <%= house.house.toiletNum %>卫 <%= house.house.area %>㎡',
                        imgUrl: '',
                        type: 'link',
                        dataUrl: '',
                        success: function () {
                        },
                        cancel: function () {
                            alert("您取消了分享链接！");
                        }

                    });

                })

                wx.error(function(res){
                    var url = 'http://m.fangmm.com/app/client/clear';
                    $.get(url, function(data) {
                        if(200 == data.code) {
                            location.reload();
                        }
                    }, 'json')
                })
            
        })()
    </script>
    <% include ../partial/analyse %>
</body>

</html>
